// import './assets/main.css
// 自我介绍 项目介绍  难点 优化的项目 解决的思路
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'
import Particles from 'vue3-particles'
import './assets/iconfont/iconfont.css' //渲染iconfont
//图片放大  以及样式
import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer'

//注册武丽组件
// import MyButton from './components/Canvas/MyButton.vue'
// import MyText from './components/Canvas/MyText.vue'
// import MyImage from './components/Canvas/MyImage.vue'
// import MyChart from './components/Canvas/MyChart.vue'
// import MyTriangle from  './components/Canvas/MyTriangle.vue'
// import MyPentagram from './components/Canvas/MyPentagram.vue'
// import MyCircle from './components/Canvas/MyCircle.vue'
import getcomponents from './utils/getcomponents'
import { VueCropper } from "vue-cropper";
import "vue-cropper/dist/index.css";
import 'animate.css'
import './utils/domToImage'
//插入网页适配插件
import  'amfe-flexible'
// import 'animate.compat.css';
// 如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}


app.use(createPinia())
// app.component('MyButton', MyButton)
// app.component('MyText', MyText)
// app.component('MyImage', MyImage)
// app.component("MyChart",MyChart)
// app.component("MyTriangle",MyTriangle)
// app.component("MyPentagram",MyPentagram)
// app.component("MyCircle",MyCircle)
app.use(getcomponents)
app.use(router)
app.use(ElementPlus)
app.use(Particles)
app.use(VueCropper)

app.use(Viewer, {
  Options: {
    'inline': true,
    'button': true, //右上角按钮
    'navbar': true, //底部缩略图
    'title': true, //当前图片标题
    'toolbar': true, //底部工具栏
    'tooltip': true, //显示缩放百分比
    'movable': true, //是否可以移动
    'zoomable': true, //是否可以缩放
    'rotatable': true, //是否可旋转
    'scalable': true, //是否可翻转
    'transition': true, //使用 CSS3 过度
    'fullscreen': true, //播放时是否全屏
    'keyboard': true, //是否支持键盘
    'url': 'data-source',
  },
});
app.mount('#app')
